<template>
    <div>
        <div style="display: flex; justify-content: center; margin-top: 10px">
            <el-input
                v-model="keywords"
                placeholder="请输入用户名进行搜索..."
                prefix-icon="el-icon-search"
                style="width: 400px; margin-right: 15px"
                clearable
                @clear="initAdmin"
                @keydown.enter.native="initAdmin"
            ></el-input>
            <el-button type="primary" icon="el-icon-search" @click="search"
                >搜索</el-button
            >
        </div>
        <div class="admin-container">
            <el-card
                class="admin-card"
                v-for="(admin, index) in admins"
                :key="index"
            >
                <div slot="header" class="clearfix">
                    <span>{{ admin.name }}</span>
                    <el-button
                        style="float: right; color: red; padding: 3px 0"
                        type="text"
                        icon="el-icon-delete"
                        @click="deleteAdmin(admin)"
                    ></el-button>
                </div>
                <div>
                    <div class="img-container">
                        <img
                            src="../../assets/images/header.jpg"
                            :alt="admin.name"
                            :title="admin.name"
                            class="userface-img"
                        />
                    </div>
                </div>
                <div class="userinfo-container">
                    <div>用户名：{{ admin.name }}</div>
                    <div>手机号码：{{ admin.phone }}</div>
                    <div>电话号码：{{ admin.telephone }}</div>
                    <div>地址：{{ admin.address }}</div>
                    <div>
                        用户状态：
                        <el-switch
                            v-model="admin.enabled"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            active-text="启用"
                            inactive-text="禁用"
                            @change="enabledChange(admin)"
                        >
                        </el-switch>
                    </div>
                    <div>
                        用户角色：
                        <el-tag
                            size="mini"
                            style="margin-right: 6px"
                            type="success"
                            v-for="(role, indexj) in admin.roles"
                            :key="indexj"
                            >{{ role.nameZh }}</el-tag
                        >
                        <el-popover
                            placement="right"
                            title="角色列表"
                            width="200"
                            trigger="click"
                            @show="showRoles(admin)"
                            @hide="updateAdminRoles(admin)"
                        >
                            <el-select
                                v-model="selectRoles"
                                multiple
                                placeholder="请选择角色"
                                filterable
                            >
                                <el-option
                                    v-for="(r, index) in allRoles"
                                    :key="index"
                                    :label="r.nameZh"
                                    :value="r.id"
                                >
                                </el-option>
                            </el-select>
                            <el-button
                                slot="reference"
                                icon="el-icon-more"
                                type="text"
                            ></el-button>
                        </el-popover>
                    </div>
                    <div>
                        备注：
                        <span v-if="admin.remark">{{ admin.remark }}</span>
                        <span v-else>无</span>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 搜索关键字
            keywords: "",
            // 操作员数据
            admins: [],
            // 所有角色
            allRoles: [],
            // 选择的角色
            selectRoles: [],
        };
    },
    created() {
        this.initAdmin();
    },
    methods: {
        // 初始化所有admin
        initAdmin() {
            this.getRequest(
                "/system/admin/getAllAdmins?keywords=" + this.keywords
            ).then((res) => {
                if (res) {
                    this.admins = res;
                }
            });
        },
        // 搜索
        search() {
            this.initAdmin();
        },
        // 删除用户
        deleteAdmin(admin) {
            this.$confirm(
                "此操作将永久删除【" + admin.name + "】操作员, 是否继续?",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
                .then(() => {
                    this.deleteRequest(
                        "/system/admin/deleteAdmin/" + admin.id
                    ).then((res) => {
                        this.initAdmin();
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        // 修改操作员状态
        enabledChange(admin) {
            // 解决小bug
            admin.authorities = null;
            this.putRequest("/system/admin/updateAdmin", admin).then((res) => {
                if (res) {
                    this.initAdmin();
                }
            });
        },
        // 初始化所有角色列表
        initAllRoles() {
            this.getRequest("/system/admin/roles/getAllRoles").then((res) => {
                if (res) {
                    this.allRoles = res;
                }
            });
        },
        // 点击气泡框显示所有角色
        showRoles(admin) {
            this.initAllRoles();

            let roles = admin.roles;
            this.selectRoles = [];
            roles.forEach((role) => {
                this.selectRoles.push(role.id);
            });
        },
        // 隐藏气泡框时触发
        updateAdminRoles(admin) {
            let roles = [];
            Object.assign(roles, admin.roles);

            let flag = false;
            if (roles.length != this.selectRoles.length) {
                flag = true;
            } else {
                for (let i = 0; i < roles.length; i++) {
                    let role = roles[i];
                    for (let j = 0; j < this.selectRoles.length; j++) {
                        let sr = this.selectRoles[j];
                        if (role.id == sr) {
                            roles.splice(i, 1);
                            i--;
                            break;
                        }
                    }
                }
                if (roles.length != 0) {
                    flag = true;
                }
            }
            if (flag) {
                let url =
                    "/system/admin/role/updateAdminRole?adminId=" + admin.id;
                this.selectRoles.forEach((sr) => {
                    url += "&rids=" + sr;
                });
                this.putRequest(url).then((resp) => {
                    if (resp) {
                        this.initAdmin();
                    }
                });
            }
        },
    },
};
</script>

<style scoped>
.admin-card {
    width: 400px;
    margin-bottom: 20px;
}
.admin-container {
    display: flex;
    justify-content: space-around;
    margin-top: 25px;
    flex-wrap: wrap;
}
.userface-img {
    width: 72px;
    height: 72px;
    border-radius: 72px;
}
.img-container {
    width: 100%;
    display: flex;
    justify-content: center;
}
.userinfo-container {
    font-size: 12px;
    color: #09a1a1;
}
.userinfo-container > div {
    margin-top: 3px;
}
</style>